'use strict';

/* 主页-banner 图片切换 */
var React = require('react-native');
var ReactTimerMixin = require('react-timer-mixin');

var {
	StyleSheet,
	ViewPagerAndroid,
	Text,
	View,
	Image
} = React;

var {
	Log
} = require('react-native-yankai-utils');


let BannerSlides = React.createClass({

	mixins: [
		ReactTimerMixin
	],

	getInitialState: function() {
		return {

		}
	},


	componentDidMount: function() {
		this._index = 0;
		this.setInterval(this.turnPage, 2500);
	},

	turnPage: function() {

		var index = this._index + 1;
		if (slides.length <= index)
			index = 0;
		this._index = index;
		this.refs.ViewPager.setPage(this._index);
		Log.info(slides.length);
		Log.info(this._index);
	},

	render: function() {



		var pages = slides.map(this.renderSlide);

		return (
			<ViewPagerAndroid ref="ViewPager"
				style={styles.container}
				initialPage={0}>
				{pages}
		    </ViewPagerAndroid>
		);
	},
	renderSlide: function(slide) {
		return (
			<View style={styles.pageStyle}>
		        <Image
		            style={styles.image}
		            source={{uri: slide.image.uri}}/>
		    </View>
		)
	}
});

var slides = [{
	image: {
		uri: 'http://m.360buyimg.com/mobilecms/s480x180_jfs/t2101/163/615889510/103772/a940ab57/561cc696N9e4aa231.jpg'
	},
	titleColor: '#fff',
	subtitleColor: '#fff'
}, {
	image: {
		uri: 'http://m.360buyimg.com/mobilecms/s480x180_jfs/t2137/224/622450074/122282/5fb2cc33/561cc4f0N6b15c029.jpg'
	},
	titleColor: '#fff',
	subtitleColor: '#fff'
}, {
	image: {
		uri: 'http://m.360buyimg.com/mobilecms/s480x180_jfs/t2416/74/623056742/51295/d701445f/561cd721Ne408d254.jpg'
	},
	titleColor: '#fff',
	subtitleColor: '#fff'
}];

var styles = StyleSheet.create({
	container: {
		height: 200,
	},
	pageStyle: {
		flex: 1,
		width: 800,
		height: 200,
		backgroundColor: 'red',
		alignItems: 'center',
	},
	image: {
		flex: 1,
		width: 300,
		height: 200,
		backgroundColor: 'green',
	}
});

module.exports = BannerSlides;